<template>
	<div class="layout-padding">
		<div class="header">
			<span class="ml-5">区域类型：</span>
			<el-tree-select
				v-model="areaTypeData"
				:data="objList"
				:props="{ value: 'id', label: 'name', children: 'children' }"
				:render-after-expand="false"
				check-strictly
				filterable
				style="width: 250px"
			/>
			<span class="ml-5">统计类型：</span>
			<el-radio-group v-model="radio">
				<el-radio value="1" border>日</el-radio>
				<el-radio value="2" border>月</el-radio>
			</el-radio-group>
			<span class="ml-5">时间范围：</span>
			<div>
				<el-date-picker :type="dateType" v-model="date" placeholder="请选择" />
			</div>
			<el-button type="primary" icon="el-icon-search" @click="search" class="ml-5">查询</el-button>
			<el-button icon="el-icon-download" @click="exportExcel">导出报表</el-button>
		</div>
		<div class="content">
			<div class="level">
				<span class="mb-5 mt-5" style="font-size: 18px">COP趋势图</span>
				<div ref="chart1" id="chart1" style="width: 100%; height: 350px"></div>
				<span class="mb-5 mt-5" style="font-size: 18px">详细报表</span>
				<div class="mt-3" style="width: 100%">
					<el-table :data="tableData" show-summary :summary-method="getSummaries" style="width: 100%">
						<el-table-column prop="timeValue" align="center" label="时间" width="180" />
						<el-table-column prop="sec" align="center" label="系统用电量(KWh)" />
						<el-table-column prop="scc" align="center" label="系统用冷量(KWh)" />
						<el-table-column prop="scop" align="center" label="系统综合cop" />
					</el-table>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import echarts from '/@/utils/chart';
import { getCopAnalysisList } from '/@/api/energymanagement/energyuse/cop';
import moment from 'moment';
import * as XLSX from 'xlsx';
import ExportJsonExcel from 'js-export-excel';
import type { VNode } from 'vue';
import { number } from 'vue-types';

const tableData = ref([]);
const areaTypeData = ref([
	{
		id: 1,
		name: '区域类型1',
	},
	{
		id: 2,
		name: '区域类型2',
	},
]);
const date = ref([moment().subtract(1, 'months').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]);
const radio = ref('1');
const dateType = ref('datetimerange');
watch(
	() => radio.value,
	(value) => {
		if (value == '1') {
			dateType.value = 'daterange';
		} else {
			dateType.value = 'monthrange';
		}
	},
	{
		immediate: true,
	}
);
const initChart = (data) => {
	const chart1 = echarts.init(document.getElementById('chart1'));
	const option = {
		grid: {
			left: '1%',
			right: '1%',
			bottom: '5%',
			containLabel: true,
		},
		xAxis: {
			type: 'category',
			axisLabel: {
				rotate: 30,
			},
			data: data.map((item) => item.timeValue),
		},

		yAxis: {
			type: 'value',
		},
		series: [
			{
				data: data.map((item) => item.scop),
				type: 'line',
			},
		],
	};
	chart1.setOption(option);
};
onMounted(() => {
	search();
});
const search = () => {
	let startDate = '';
	let endDate = '';
	if (date.value.length > 0) {
		if (dateType.value == 'daterange') {
			startDate = moment(date.value[0]).format('YYYY-MM-DD');
			endDate = moment(date.value[1]).format('YYYY-MM-DD');
		} else if (dateType.value == 'monthrange') {
			startDate = moment(date.value[0]).format('YYYY-MM');
			endDate = moment(date.value[1]).format('YYYY-MM');
		} else {
			startDate = moment(date.value[0]).format('YYYY');
			endDate = moment(date.value[1]).format('YYYY');
		}
		getCopAnalysisList({
			startDate: startDate,
			endDate: endDate,
		}).then((res) => {
			tableData.value = res.data;
			initChart(tableData.value);
		});
	} else {
		useMessage().warning('请选择日期');
	}
};
const exportExcel = () => {
	if (tableData.value.length === 0) return useMessage().warning('暂无数据,无法导出!');
	const excelData = [];
	tableData.value.forEach((item) => {
		excelData.push({
			时间: item.timeValue,
			系统用电量: item.sec,
			系统用冷量: item.scc,
			系统综合cop: item.scop,
		});
	});
	const options = {};
	options.fileName = 'COP分析报表'; //表格名称
	options.datas = [
		{
			sheetData: excelData, // 表格数据
			sheetName: 'sheet',
			sheetFilter: ['时间', '系统用电量', '系统用冷量', '系统综合cop'], // 表头对应的sheetData的数据
			sheetHeader: ['时间', '系统用电量', '系统用冷量', '系统综合cop'], //  表头名称
			columnWidths: ['6', '6', '6', '6'], // 列宽
		},
	];
	const toExcel = new ExportJsonExcel(options);
	window.XLSX = XLSX;
	toExcel.saveExcel();
};
const getSummaries = (param: any) => {
	const { columns, data } = param;
	const sums: (string | VNode)[] = [];
	columns.forEach((column, index) => {
		const values = data.map((item) => Number(item[column.property]));
		if (!values.every((value) => Number.isNaN(value))) {
			sums[index] = `${values.reduce((prev, curr) => {
				const value = Number(curr);
				if (!Number.isNaN(value)) {
					return prev + curr;
				} else {
					return prev;
				}
			}, 0)}`;

			sums[index] = Number(sums[index]).toFixed(2);
		} else {
			sums[index] = '合计';
		}
		if (index === 3) {
			if (sums[2] == 0) {
				sums[index] = 0;
			} else {
				sums[index] = (sums[2] / sums[1]).toFixed(2);
			}
			return;
		}
	});

	return sums;
};
</script>
<style lang="scss" scoped>
.header {
	height: 60px;
	display: flex;
	padding: 20px;
	align-items: center;
	background-color: white;
}
.content {
	margin-top: 10px;
	overflow-y: scroll;
}
.level {
	margin-top: 10px;
	padding: 20px;
	width: 100%;
	background-color: white;
}
</style>
